<template>
  <div>
    <div class="top">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="拼团概述" name="gaishu">
          <div class="box">
            <div class="box_pinduan">
              <p>拼团</p>
              <div class="box_collage">
                <div class="box_collage1">
                  <div class="box_collage_top">
                    <p>已成团</p>
                  </div>
                  <p class="shul">数量</p>
                  <p class="shul">0</p>
                </div>
                <div class="box_collage1">
                  <div class="box_collage_top1">
                    <p>进行中</p>
                  </div>
                  <p class="shul">数量</p>
                  <p class="shul">0</p>
                </div>
              </div>
            </div>
            <div class="box_pinduan">
              <p>订单</p>
             
              <div class="box_collage">
                <div class="box_collage1">
                  <div class="box_collage_button">
                    <p class="rgb">今日成交</p>
                    <p class="rmb">人均消费:￥0.00</p>
                  </div>
                  <div class="box_div">
                    <div class="box_zuo">
                    <p class="shul">数量</p>
                  <p class="shul">0</p>
                  </div>
                  <div class="box_you">
                    <p class="shul">成交额</p>
                  <p class="shul1">￥0.00</p>
                  </div>
                  </div>
                </div>
                <div class="box_collage1">
                  <div class="box_collage_button">
                    <p class="rgb1">昨日成交</p>
                    <p class="rmb">人均消费:￥0.00</p>
                  </div>
                  <div class="box_div">
                    <div class="box_zuo">
                    <p class="shul">数量</p>
                  <p class="shul">0</p>
                  </div>
                  <div class="box_you">
                    <p class="shul">成交额</p>
                  <p class="shul1">￥0.00</p>
                  </div>
                  </div>
                </div>
              </div>
              <div class="box_collage">
                <div class="box_collage1">
                  <div class="box_collage_button">
                    <p class="rgb2">近7日成交</p>
                    <p class="rmb">人均消费:￥0.00</p>
                  </div>
                  <div class="box_div">
                    <div class="box_zuo">
                    <p class="shul">数量</p>
                  <p class="shul">0</p>
                  </div>
                  <div class="box_you">
                    <p class="shul">成交额</p>
                  <p class="shul1">￥0.00</p>
                  </div>
                  </div>
                </div>
                <div class="box_collage1">
                  <div class="box_collage_button">
                    <p class="rgb3">近一个月</p>
                    <p class="rmb">人均消费:￥0.00</p>
                  </div>
                  <div class="box_div">
                    <div class="box_zuo">
                    <p class="shul">数量</p>
                  <p class="shul">0</p>
                  </div>
                  <div class="box_you">
                    <p class="shul">成交额</p>
                  <p class="shul1">￥0.00</p>
                  </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="会场管理" name="first">
          <button class="hui_btn" @click="add1">添加会场</button>
          <div class="hui_list">
            <el-table :data="tableData" style="width: 100%;" border>
              <el-table-column
                fixed
                prop="name"
                label="会场名称"
                width="185"
              ></el-table-column>
              <el-table-column
                prop="date"
                label="时间"
                width="185"
              ></el-table-column>
              <el-table-column
                prop="datetext"
                label="创建时间"
                width="185"
              ></el-table-column>
              <el-table-column
                prop="number"
                label="商品数量"
                width="185"
              ></el-table-column>
              <el-table-column
                prop="status"
                label="状态"
                width="185"
              ></el-table-column>
              <el-table-column prop="zip" label="操作" width="174">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="update(scope.row)"
                  >
                    修改
                  </el-button>
                  <el-button type="text" size="small" @click="del(scope.row)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[3, 2]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="shuoyou"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商品管理" name="second">
          <div class="shangpin_box">
            <!-- 查询 -->
            <div class="chaxun_box">
              <p>查询药品</p>
              <div class="zhong">
                <el-date-picker
                  v-model="value1"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </div>
              <div>
                <el-input
                  placeholder="请输入内容"
                  v-model="input3"
                  @blur="blur"
                  class="input-with-select"
                >
                  <el-button
                    slot="append"
                    @click="separbtn"
                    icon="el-icon-search"
                  ></el-button>
                </el-input>
              </div>
            </div>
            <!-- 商品 -->
            <div class="shangpin_list">
              <button class="shangpin_btn" @click="addkill2">添加商品</button>
              <div class="tableData2">
                <el-table :data="tableData2" border style="width: 100%;">
                  <el-table-column fixed prop="date" label="商品" width="100">
                    <template slot-scope="scope">
                      <img
                        class="yao_img"
                        src="http://127.0.0.1:7001/public/yao.png"
                        alt=""
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    fixed
                    prop="name"
                    label="商品"
                    width="100"
                  ></el-table-column>
                  <el-table-column
                    prop="paixu"
                    label="排序"
                    width="200"
                  ></el-table-column>
                  <el-table-column
                    prop="rmb"
                    label="价格"
                    width="200"
                  ></el-table-column>
                  <el-table-column
                    prop="ip"
                    label="所属会场"
                    width="200"
                  ></el-table-column>
                  <el-table-column
                    prop="mai"
                    label="已付款/未付款/库存"
                    width="250"
                  ></el-table-column>
                  <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                      <div class="scope_cz">
                        <i
                          class="el-icon-edit"
                          @click="handleClickupdate(scope.row)"
                        ></i>
                      </div>
                      <div class="scope_cz">
                        <i
                          class="el-icon-delete"
                          @click="handleClickdel(scope.row)"
                        ></i>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="分类管理" name="third">
          <div class="miaoshashangpin">
            <button @click="dialogFormVisible = true" class="button">
              添加新秒杀商品分类
            </button>
            <div class="shashasha">
              <el-table :data="tableData3" border style="width: 100%;">
                <el-table-column
                  fixed
                  prop="id"
                  label="ID"
                  width="150"
                ></el-table-column>
                <el-table-column
                  prop="id"
                  label="显示顺序"
                  width="170"
                ></el-table-column>
                <el-table-column
                  prop="title"
                  label="标题"
                  width="170"
                ></el-table-column>
                <el-table-column
                  prop="status"
                  label="状态"
                  width="170"
                ></el-table-column>
                <el-table-column fixed="right" label="操作" width="170">
                  <template slot-scope="scope">
                    <div class="sha_caoz">
                      <i
                        class="el-icon-edit"
                        @click="dialogupdata(scope.row)"
                      ></i>
                      <i class="el-icon-delete" @click="shadel(scope.row)"></i>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 添加模态框 -->
            <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="排序" :label-width="formLabelWidth">
                  <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                  <el-radio v-model="radio" label="显示">显示</el-radio>
                  <el-radio v-model="radio" label="隐藏">隐藏</el-radio>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="shabtn">确 定</el-button>
              </div>
            </el-dialog>
            <!-- 修改模态框 -->
            <el-dialog title="修改分类" :visible.sync="dialogFormVisibleupdata">
              <el-form :model="zhuanhuan">
                <el-form-item label="排序" :label-width="formLabelWidth">
                  <el-select
                    v-model="zhuanhuan.id"
                    placeholder="请选择活动区域"
                  >
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                  <el-input
                    v-model="zhuanhuan.title"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                  <el-radio v-model="zhuanhuan.status" label="显示">
                    显示
                  </el-radio>
                  <el-radio v-model="zhuanhuan.status" label="隐藏">
                    隐藏
                  </el-radio>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleupdata = false">
                  取 消
                </el-button>
                <el-button type="primary" @click="shabtnupdata">
                  确 定
                </el-button>
              </div>
            </el-dialog>
          </div>
        </el-tab-pane>
        <el-tab-pane label="轮播管理" name="fourth">
          <div class="miaoshashangpin">
            <button @click="dialogFormVisible2 = true" class="button">
              添加轮播图
            </button>
            <div class="shashasha">
              <el-table :data="tableData4" border style="width: 100%;">
                <el-table-column
                  fixed
                  prop="id"
                  label="ID"
                  width="150"
                ></el-table-column>
                <el-table-column
                  prop="http"
                  label="链接"
                  width="170"
                ></el-table-column>
                <el-table-column
                  prop="title"
                  label="标题"
                  width="170"
                ></el-table-column>
                <el-table-column
                  prop="status"
                  label="状态"
                  width="170"
                ></el-table-column>
                <el-table-column fixed="right" label="操作" width="170">
                  <template slot-scope="scope">
                    <div class="sha_caoz">
                      <i
                        class="el-icon-edit"
                        @click="dialogupdata2(scope.row)"
                      ></i>
                      <i class="el-icon-delete" @click="shadel2(scope.row)"></i>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 添加模态框 -->
            <el-dialog title="添加轮播" :visible.sync="dialogFormVisible2">
              <el-form :model="form">
                <el-form-item label="排序" :label-width="formLabelWidth">
                  <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="连接" :label-width="formLabelWidth">
                  <el-input v-model="form.http" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                  <el-radio v-model="radio" label="显示">显示</el-radio>
                  <el-radio v-model="radio" label="隐藏">隐藏</el-radio>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="shabtn2">确 定</el-button>
              </div>
            </el-dialog>
            <!-- 修改模态框 -->
            <el-dialog title="修改分类" :visible.sync="dialogFormVisibleupdata2">
              <el-form :model="zhuanhuan">
                <el-form-item label="排序" :label-width="formLabelWidth">
                  <el-select
                    v-model="zhuanhuan.id"
                    placeholder="请选择活动区域"
                  >
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                  <el-input
                    v-model="zhuanhuan.title"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="连接" :label-width="formLabelWidth">
                  <el-input
                    v-model="zhuanhuan.http"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                  <el-radio v-model="zhuanhuan.status" label="显示">
                    显示
                  </el-radio>
                  <el-radio v-model="zhuanhuan.status" label="隐藏">
                    隐藏
                  </el-radio>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleupdata2 = false">
                  取 消
                </el-button>
                <el-button type="primary" @click="shabtnupdata2">
                  确 定
                </el-button>
              </div>
            </el-dialog>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import {
  zqhkill,
  zqhkilldelete,
  zqhkill2,
  zqhkilldelete2,
  zqhkill3,
  zqhzqhkill3add,
  zqhkill3id,
  zqhkilldelete3,
  zqhkill4,
  zqhzqhkill4add,
  zqhkill4id,
  zqhkilldelete4
} from '../../api/index'
export default {
  data() {
    return {
      activeName: 'gaishu',
      tableData: [],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      page: 3,
      size: 1,
      shuoyou: 0,
      input3: '',
      value1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisibleupdata: false,
      dialogFormVisibleupdata2: false,
      form: {
        name: '',
        http:'',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      formLabelWidth: '120px',
      radio: '显示',
      zhuanhuan: '',
    }
  },
  created() {
    this.list1()
    this.list2()
    this.list3()
    this.list4()
  },
  methods: {
    // 获取会场管理数据
    list1() {
      zqhkill().then((res) => {
        if (res.code == 200) {
          this.shuoyou = res.data.length
          let a = res.data
          this.tableData = a.slice(
            (this.size - 1) * this.page,
            this.size * this.page,
          )
        }
      })
    },
    // 添加会场数据
    add1() {
      this.$router.push('/addkill')
    },
    // 修改会场数据
    update(row) {
      this.$router.push({ path: '/updatekill', query: row })
    },
    // 删除会场数据
    del(row) {
      zqhkilldelete({ id: row.id }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.list1()
          this.$notify({
            title: '删除成功',
            message: '数据已被删除',
            type: 'success',
          })
        }
      })
    },
    // 每页多少条
    handleSizeChange(val) {
      this.page = val
      this.size = 1
      this.list1()
    },
    // 当前是第几页
    handleCurrentChange(val) {
      this.size = val
      this.list1()
    },
    handleClick(tab) {
      // console.log(tab)
    },
    // 获取商品管理数据
    list2() {
      zqhkill2().then((res) => {
        if (res.code == 200) {
          this.tableData2 = res.data
        }
      })
    },
    // 修改商品数据
    handleClickupdate(tab) {
      console.log(tab)
      // this.$router.push({path:'/updatekill2',query:tab})
      this.$router.push({ path: '/updatekill2', query: tab })
    },
    // 删除商品数据
    handleClickdel(tab) {
      console.log(tab)
      zqhkilldelete2({ id: tab.id }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.list2()
          this.$notify({
            title: '删除成功',
            message: '数据已被删除',
            type: 'success',
          })
        }
      })
    },
    // 添加商品页
    addkill2() {
      this.$router.push('/addkill2')
    },
    // 搜索商品
    separbtn() {
      console.log(this.input3)
      let a = this.tableData2.filter((item) => {
        return item.name == this.input3
      })
      this.tableData2 = a
    },
    // 失去焦点
    blur() {
      this.list2()
    },
    // 获取分类管理数据
    list3() {
      zqhkill3().then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.tableData3 = res.data
        }
      })
    },
    // 添加分类数据
    shabtn() {
      zqhzqhkill3add({ title: this.form.name, status: this.radio }).then(
        (res) => {
          if (res.code == 200) {
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
            })
            this.dialogFormVisible = false
            this.list3()
          }
        },
      )
    },
    // 修改数据
    shabtnupdata() {
      zqhkill3id(this.zhuanhuan).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.$notify({
            title: '成功',
            message: '添加成功',
            type: 'success',
          })
          this.dialogFormVisibleupdata = false
        }
      })
    },
    dialogupdata(e) {
      this.zhuanhuan = e
      console.log(this.zhuanhuan)
      this.dialogFormVisibleupdata = true
    },
    // 删除分类数据
    shadel(e) {
      zqhkilldelete3({ id: e.id }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.$notify({
            title: '已删除',
            message: '删除成功',
            type: 'success',
          })
          this.list3()
        }
      })
    },
    // 获取轮播图管理数据
    list4() {
      zqhkill4().then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.tableData4 = res.data
        }
      })
    },
    // 添加轮播数据
    shabtn2() {
      console.log(111)
      zqhzqhkill4add({ title: this.form.name, status: this.radio,http:this.form.http }).then(
        (res) => {
          if (res.code == 200) {
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
            })
            this.dialogFormVisible2 = false
            this.list4()
          }
        },
      )
    },
    // 修改轮播数据
    shabtnupdata2() {
      zqhkill4id(this.zhuanhuan).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.$notify({
            title: '成功',
            message: '添加成功',
            type: 'success',
          })
          this.dialogFormVisibleupdata2 = false
        }
      })
    },
    dialogupdata2(e) {
      this.zhuanhuan = e
      console.log(this.zhuanhuan)
      this.dialogFormVisibleupdata2 = true
    },
    // 删除轮播数据
    shadel2(e) {
      zqhkilldelete4({ id: e.id }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.$notify({
            title: '已删除',
            message: '删除成功',
            type: 'success',
          })
          this.list4()
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.top {
  width: 1200px;
  height: 50px;
  margin: 50px auto;
}
.box {
  width: 1170px;
  height: 630px;
  background-color: white;
  border: 5px solid rgb(245, 245, 245);
  margin: 0 auto;
}
.box_pinduan {
  width: 97%;
  height: 200px;
  margin: 20px auto;
}
.box_collage {
  width: 100%;
  height: 150px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.box_collage1 {
  width: 560px;
  height: 150px;
  border: 1px solid gainsboro;
}
.box_collage_top {
  width: 100%;
  height: 27px;
  padding-top: 5px;
  background-color: rgb(240, 238, 238);
  p{
    width: 50px;
    height: 20px;
    background-color: rgb(49, 218, 49);
    font-size: 12px;
    color: white;
    text-align: center;
    line-height: 20px;
    margin-left: 20px;
}
}
.box_collage_top1{
    width: 100%;
  height: 27px;
  padding-top: 5px;
  background-color: rgb(240, 238, 238);
  p{
    width: 50px;
    height: 20px;
    background-color:skyblue;
    font-size: 12px;
    color: white;
    text-align: center;
    line-height: 20px;
    margin-left: 20px;
}
}
.box_collage_button{
    width: 100%;
  height: 27px;
  padding-top: 5px;
  background-color: rgb(240, 238, 238);
  display: flex;
  justify-content: space-between;
  p{
    height: 20px;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
    margin-left: 20px;
}
}
.rgb{
    width: 50px;
    color: white;
    background-color:skyblue;
}
.rgb1{
    width: 50px;
    color: white;
    background-color: rgb(49, 218, 49);
}
.rgb2{
    width: 50px;
    color: white;
    background-color: orange;
}
.rgb3{
    width: 50px;
    color: white;
    background-color: red;
}
.rmb{
 width: 150px;
}
.shul{
    text-align: center;
    line-height: 50px;
}
.box_div{
    display: flex;
    // justify-content: space-around;
    align-items: center;
    margin-top: 10px;
}
.box_zuo{
    width: 400px;
    border-right: 1px solid gainsboro;
}
.box_you{
    width: 400px;
}
.shul1{
    text-align: center;
    line-height: 50px;
    color: red;
}
.sa_list {
  width: 1200px;
  height: 40px;
  margin: 50px auto;
}
.hui_list {
  width: 1100px;
  margin: 0 auto;
}
.hui_btn {
  width: 100px;
  height: 25px;
  background-color: white;
  border-radius: 5px;
  margin: 30px;
  border: 2px solid gainsboro;
}
.pagination {
  width: 1100px;
  height: 50px;
  margin: 30px auto;
  text-align: right;
}
.shangpin_box {
  width: 1200px;
  margin: 30px auto;
}
.chaxun_box {
  width: 1200px;
  display: flex;
  align-items: center;
}
.zhong {
  margin: 0 70px;
}
.shangpin_list {
  width: 100%;
  margin: 50px auto;
}
.shangpin_btn {
  width: 80px;
  height: 25px;
  border: 2px solid gainsboro;
  border-radius: 5px;
  background-color: white;
}
.tableData2 {
  margin-top: 20px;
}
.yao_img {
  width: 50px;
  height: 50px;
}
.scope_cz {
  font-size: 20px;
  float: left;
  margin: 0 7px;
}
.miaoshashangpin {
  width: 1100px;
  margin: 30px auto;
}
.button {
  width: 130px;
  height: 30px;
  border: 2px solid gainsboro;
  background-color: white;
  border-radius: 5px;
  line-height: 30px;
}
.shashasha {
  width: 900px;
  margin-top: 30px;
}
.sha_caoz {
  width: 100px;
  display: flex;
  justify-content: space-around;
  font-size: 20px;
}
</style>
